<template>
    <div class="space_main">
        <h3>ttttt</h3>
        <span>{{manger}}eee</span>
        <div class="header">
            <!-- 左侧tab选择 -->
            <div class="tab_sel" >
                <!-- 空间管理的时候隐藏 -->
                <el-row v-show="manger != 'space'">
                    <span>活动状态：</span>
                    <el-button type="primary" plain round>全部</el-button>
                    <el-button type="primary" plain round>进行中</el-button>
                    <el-button type="primary" plain round>已结束</el-button>
                </el-row>
            </div>
            <!-- <div class="tab_sel" v-show="manger != 'space'"></div> -->
            <!-- 右侧发布活动 -->
            <div>
                <!-- 搜索框 -->
                <el-input
                    placeholder="请输入内容"
                    style="width:200px"
                    suffix-icon="el-icon-search"
                    v-model="input2">
                </el-input>
                 <!-- 发布空间 -->
                <el-button v-show="manger == 'space'" @click="to_add_space" type="warning" style="margin:0 20px 0 30px"><i class="fa fa-plus-square"></i> 发布空间</el-button>
                <!-- 发布活动 -->
                <el-button v-show="manger == 'active'" @click="to_add_active" type="warning" style="margin:0 20px 0 30px"><i class="fa fa-plus-square"></i> 发布活动</el-button>
            </div>
        </div>
        <!-- 活动管理活动列表 -->
        <div class="" style="margin-top:5px;" v-show="manger == 'active'">
            <el-table :data="tableData" stripe style="width: 100%;text-align: center">
                <el-table-column align='center' prop="posters" label="活动海报" width="180">
                    <template slot-scope="scope">
                        <img :src= scope.row.posters alt="">
                    </template>
                </el-table-column>
                <el-table-column align='center' prop="name" label="活动名称" width="180"></el-table-column>
                <el-table-column align='center' prop="time" label="活动时间" width="180"></el-table-column>
                <el-table-column align='center' prop="address" label="活动地址" width="180"></el-table-column>
                <el-table-column align='center' prop="browse_num" label="浏览数" width="180"></el-table-column>
                <el-table-column align='center' prop="share_num" label="分享数" width="180"></el-table-column>
                <el-table-column align='center' prop="participants" label="参加人数" width="180">
                    <template slot-scope="scope">
                        <span style="color:#5CB4F4;">{{scope.row.participants}}</span>
                    </template>
                </el-table-column>
                <el-table-column align='center' prop="status" label="活动状态" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="scope.row.status == 1" round>进行中</el-button>
                        <el-button type="danger" v-if="scope.row.status == 2" round>已结束</el-button>
                    </template>
                </el-table-column>
                <el-table-column align='center' prop="operation" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 空间管理活动列表 -->
        <div class="" style="margin-top:5px;" v-show="manger == 'space'">
            <el-table :data="tableData" stripe style="width: 100%;text-align: center">
                <el-table-column align='center' prop="posters" label="空间图片" width="180">
                    <template slot-scope="scope">
                        <img :src= scope.row.posters alt="">
                    </template>
                </el-table-column>
                <el-table-column align='center' prop="name" label="空间名称" width="180"></el-table-column>
                <el-table-column align='center' prop="time" label="开放时间" width="180"></el-table-column>
                <el-table-column align='center' prop="address" label="空间地址" width="180"></el-table-column>
                <el-table-column align='center' prop="browse_num" label="系列活动" width="180"></el-table-column>
                <el-table-column align='center' prop="share_num" label="主题活动" width="180"></el-table-column>
                <el-table-column align='center' prop="participants" label="见面活动" width="180"></el-table-column>
                <el-table-column align='center' prop="operation" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 路由切换 -->
        <router-view/>
        <!-- 列表分页 -->
        <div class="clearfix">
            <div class="block page_list" style="">
                <el-pagination
                    layout="prev, pager, next"
                    :total="50">
                </el-pagination>
                <div class="total">共60条</div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</template>
<script>
import { apiAddress } from '@/request/api';// 导入我们的api接口
export default {
    data(){
        return {
            input2:'',
            tableData: [{
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            }, {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:2,
            operation:'编辑'
            }, {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:2,
            operation:'编辑'
            }, {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            },
            {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            },
            {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:2,
            operation:'编辑'
            },
            {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            },
            {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            },
            {
            posters: 'https://mirror-gold-cdn.xitu.io/16943f9b66c21b35716?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            name: '520 | 2天不夜趴 一起来玩吧赶快来参加',
            time:'2019年6月20日 19：00-23：00',
            address: '杭州市余杭区西溪八方城7栋5楼508',
            browse_num:100,
            share_num:55,
            participants:10,
            status:1,
            operation:'编辑'
            }]
            
        }
    },
    props:['manger'],
    methods:{
        // 跳转空间发布页
        to_add_space(){
            this.$router.push({path: '/space_release', query: {'id':1}})
        },
        // 跳转活动发布页
        to_add_active(){
            this.$router.push({path: '/active_release', query: {'id':1}})
        },
        // 获取数据            
        getLoad() {
            // 调用api接口，并且提供了两个参数   
            console.log('getLoad,,,,,,,,,,')             
            apiAddress({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                console.log('res................')
                console.log(res)
                // 获取数据成功后的其他操作
                        
            }).catch((err)=>{
                console.log(err)
                console.log('error') 
            })            
        },       
    },
    mounted() {
        this.getLoad();
        console.log(this.manger)
    }
    // components:{'HelloWorld'}
}
</script>
<style lang="scss" scoped>
    .space_main {
        color:#333;
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height:80px;
            border-bottom:1px solid #F1F1F1;
            // border-:1px solid #F1F1F1;
            .tab_sel {
                padding-left: 20px;
            }
        }
    }
    .clearfix:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
    .clearfix {
        zoom: 1;
    }
    .page_list {
        width:350px;
        float:right;
        margin:10px 0;
        display: flex;
        align-items: center;
        .el-pagination {
            display: inline-block;
        }
        .total {
            display: inline-block;
            font-size: 12px;
        }
    }
</style>
